<template>
    <div ref="el" class="box" :style="style">
        (x:{{ x }},y:{{ y }})
    </div>
</template>
<script lang='ts' setup>
 import { ref } from 'vue'
 import { useDraggable } from '@vueuse/core'
 const el = ref<HTMLElement | null>(null)
 const {x,y,style}=useDraggable(el,{
    initialValue:{
        x:40,
        y:40
    }
 })
</script>
<style lang='scss' scoped>
    .box{
        position:absolute;
        left: 20px;
        top:10px;
        width: 100px;
        height: 50px;
        background-color: pink;
        border: 2px dashed #ccc;
    }
</style>